<template>
	<u-toast ref="uToastRef"></u-toast>
	<view class="login">
		<image class="bg" src="/static/images/login_bg.png" />
		<view class="box">
			<view class="case">
				<view class="logo">
					<image src="/static/images/logo.png" />
				</view>
				<view class="title">欢迎登录</view>
				<view class="title">中储粮质检中心</view>
				<view class="form">
					<template v-if="toggle">
						<view class="form_item">
							<view class="form_label">手机号</view>
							<view class="form_value">
								<u-input v-model="model.dataForm.mobile" border="none" :customStyle="customStyle"
									placeholderClass='placeholder' placeholder='请输入手机号'></u-input>
							</view>
						</view>
						<view class="form_item">
							<view class="form_label">验证码</view>
							<view class="form_value">
								<u-input v-model="model.dataForm.captcha" type='number' border="none"
									:customStyle="customStyle" placeholderClass='placeholder' placeholder='请输入验证码'>
									<template #suffix>
										<up-code ref="uCodeRef" @change="onCodeChange" seconds="60"
											changeText="X秒重新获取"></up-code>
										<up-button @tap="getCode" :text="tips" size="mini" color='#079152'></up-button>
									</template>
								</u-input>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="form_item">
							<view class="form_label">账号</view>
							<view class="form_value">
								<u-input v-model="model.dataForm.username" border="none" :customStyle="customStyle"
									placeholderClass='placeholder' placeholder='请输入账号'></u-input>
							</view>
						</view>
						<view class="form_item">
							<view class="form_label">密码</view>
							<view class="form_value">
								<u-input v-model="model.dataForm.password" :type="isEye ? 'password' : 'text'"
									border="none" :customStyle="customStyle" placeholderClass='placeholder'
									placeholder='请输入密码'>
									<template #suffix>
										<u-icon :name="isEye ? 'eye' : 'eye-off'" @click="()=> isEye = !isEye"
											color="#989898" size="24"></u-icon>
									</template>
								</u-input>
							</view>
						</view>
					</template>
				</view>
				<view class="tabs">
					<span class="label" @click='onRegister'>账号注册</span>
					<span class="label" @click="()=> toggle = !toggle">{{toggle ? '密码登录' : '验证码登录'}}</span>
				</view>
			</view>
			<view class="tips">
				登录即您已阅读并同意<text @click='toAgreement'>《用户协议&隐私政策》</text>
			</view>
			<view class="btn">
				<up-button type="primary" :loading='phoneloading' loadingText="登录中..." color='#079152' shape="circle"
					v-if="toggle" @click="onPhoneLogin" text="登录"></up-button>
				<up-button type="primary" :loading='accountloading' loadingText="登录中..." color='#079152' shape="circle"
					v-else @click="onAccountLogin" text="登录"></up-button>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { Login, PhoneLogin, GetCode } from "@/api/login.js"
	import { commonStore } from "@/store/commonStore.js"

	// 账号密码/手机号登录
	const toggle = ref(true)
	// 密码框type切换
	const isEye = ref(true)
	// 登录状态
	const phoneloading = ref(false)
	const accountloading = ref(false)
	const uToastRef = ref();
	const uCodeRef = ref(null);



	// 登录信息
	const model = reactive<any>({
		dataForm: {
			username: '17780651307',
			password: '123456'
		}
	})
	// 输入框样式
	const customStyle = ref<any>({ background: '#F6F6F7', height: '80rpx', paddingLeft: '14px', paddingRight: '14px' })

	const tips = ref('发送');

	const onCodeChange = (text : any) => {
		tips.value = text;
	};
	const checkPhone = () => {

	};
	const getCode = async () => {
		if (!model.dataForm.mobile) {
			return uToastRef.value.show({
				message: '请输入手机号',
				position: 'top',
				type: "warning",
			})
		}
		if (!uni.$u.test.mobile(model.dataForm.mobile)) {
			return uToastRef.value.show({
				message: '请输入正确的手机号',
				position: 'top',
				type: "warning",
			})
		}
		if (uCodeRef.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码',
			});
			try {
				const result = await GetCode({ mobile: model.dataForm.mobile})
				uni.hideLoading();
				uToastRef.value.show({
					message: '验证码已发送',
					type: "success",
					position: 'top',
					complete() {
						uCodeRef.value.start();
					},
				})
			} catch (e) {
				uni.hideLoading();
			}
		} else {
			uToastRef.value.show({
				message: '倒计时结束后再发送',
				position: 'top',
				type: "warning",
			})
		}
	};

	// const onToggle = (value : number) => {
	// 	toggle.value = value
	// };

	const onRegister = () => {
		uni.navigateTo({
			url: '/pages/register/register'
		})
	};

	const toAgreement = () => {
		uni.navigateTo({
			url: '/subpages/privacy-agreement/index'
		})
	};
	const onPhoneLogin = async () => {
		if (!model.dataForm.mobile) {
			return uToastRef.value.show({
				message: '请输入手机号',
				position: 'top',
				type: "warning",
			})
		}
		if (!uni.$u.test.mobile(model.dataForm.mobile)) {
			return uToastRef.value.show({
				message: '请输入正确的手机号',
				position: 'top',
				type: "warning",
			})
		}

		if (!model.dataForm.captcha) {
			return uToastRef.value.show({
				message: '请输入验证码',
				position: 'top',
				type: "warning",
			})
		}

		try {
			phoneloading.value = true
			const result = await PhoneLogin({ ...model.dataForm })
			uToastRef.value.show({
				message: '登录成功',
				type: "success",
				position: 'top',
				complete() {
					phoneloading.value = false
					commonStore().$patch((state : any) => {
						state.token = result.token;
						state.userInfo = result.userInfo;
					});
					uni.setStorage({
						key: "token",
						data: result.token,
					});
					uni.switchTab({
						url: "/pages/index/index",
					});
				},
			})
		} catch (e) {
			phoneloading.value = false
		}

	}

	const onAccountLogin = async () => {
		if (!model.dataForm.username) {
			return uToastRef.value.show({
				message: '请输入账号',
				position: 'top',
				type: "warning",
			})
		}

		if (!model.dataForm.password) {
			return uToastRef.value.show({
				message: '请输入密码',
				position: 'top',
				type: "warning",
			})
		}
		try {
			accountloading.value = true
			const res = await Login({ ...model.dataForm })
			uToastRef.value.show({
				message: '登录成功',
				position: 'top',
				type: "success",
				complete() {
					accountloading.value = false
					commonStore().$patch((state : any) => {
						state.token = res.result.token;
						state.userInfo = res.result.userInfo;
					});
					uni.setStorage({
						key: "token",
						data: res.result.token,
					});
					uni.switchTab({
						url: "/pages/index/index",
					});
				},
			})
		} catch (e) {
			accountloading.value = false
		}


	}
</script>

<style scoped lang="scss">
	::v-deep.placeholder {
		color: #ccc;
	}

	.login {
		height: 100vh;
		background: #E7F1EE;
		position: relative;

		.bg {
			width: 100%;
			height: 460rpx;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
		}

		.box {
			position: absolute;
			top: 20%;
			padding: 0 20rpx;
			width: 100%;
			box-sizing: border-box;

			.case {
				background: #fff;
				border-radius: 10px;
				position: relative;
				padding: 80rpx 40rpx 20rpx 40rpx;

				.logo {
					position: absolute;
					top: -54rpx;
					left: 50%;
					transform: translateX(-50%);
					background: #fff;
					border-radius: 50%;
					padding: 20rpx;

					image {
						width: 82rpx;
						height: 82rpx;
					}
				}

				.title {
					font-weight: 700;
					font-size: 36rpx;
					color: #353535;
					text-align: center;
					margin-bottom: 5rpx;
				}

				.form {
					margin-top: 50rpx;

					.form_item {
						margin-bottom: 30rpx;

						.form_label {
							font-size: 26rpx;
							color: #353535;
							font-weight: 500;
							margin-bottom: 20rpx;
						}
					}
				}

				.tabs {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #079152;
					font-size: 28rpx;
					margin-top: 40rpx;
				}

			}

			.btn {
				margin-top: 100rpx;
			}

			.tips {
				font-size: 14px;
				margin-top: 20rpx;
				color: #9E9E9E;

				text {
					color: #079152;
				}
			}
		}


	}
</style>